<template>
  <ul class="tool">
    <el-tooltip
      v-for="(item, index) in list"
      placement="top"
      :key="index"
      popper-class="tool-tooltip"
      :content="item.tip"
    >
      <li :class="{ active: item.active }" @click="item.handler">
        <img :src="item.icon" />
      </li>
    </el-tooltip>
    <layer-picker
      :visible.sync="showLayerPick"
      :value="pickLayers"
      :basemap="showBase"
      :terrain="showTerrain"
      :maximum="maximumScreenSpaceError"
      @maximum-handle="maximumScreenSpaceErrorHandle"
      @basemap-handle="showBase = !showBase"
      @terrain-handle="showTerrain = !showTerrain"
      :cesium-map="cesiumMap"
      @input="(val) => $emit('update:pickLayers', val)"
    />
    <layer-point-picker
      :visible.sync="showPointLayerPick"
      :value="pickLayers"
      @input="(val) => $emit('update:pickLayers', val)"
    />
  </ul>
</template>

<script>
import { wutu3d, Cesium, AppGlobalConfig } from "@/public/global/const.js";
import LayerPicker from "./LayerPicker";
import { Tooltip } from "@/component/ElementUi";
import { UpdateTailingPond3DConfig } from "@/api";
import LayerPointPicker from "./LayerPointPicker";
import { PUBLIC_URL } from "@/public/global/const.js";

export default {
  name: "TheTool",
  components: {
    LayerPicker,
    ElTooltip: Tooltip,
    LayerPointPicker,
  },
  props: {
    currentPond: {
      type: Object,
      default() {
        return {};
      },
    },
    reciveId: {
      type: Number,
    },
    cesiumMap: {
      type: Object,
      default() {
        return {};
      },
    },
    pickLayers: {
      type: Array,
      default() {
        return [];
      },
    },
  },
  data() {
    return {
      showBase: true,
      showTerrain: true,
      rotate: false,
      showLayerPick: false,
      showPointLayerPick: false,
      maximumScreenSpaceError: 16,
    };
  },
  computed: {
    list() {
      return [
        // {
        //     icon: "./images/icon/map.svg",
        //     active: this.showBase,
        //     handler: () => {
        //         this.showBase = !this.showBase;
        //     },
        //     tip: "底图控制",
        // },
        {
          icon: PUBLIC_URL + "images/icon/home.svg",
          active: false,
          handler: () => {
            this.$emit("back");
          },
          tip: "主视角",
          hidden: !this.reciveId,
        },
        {
          icon: PUBLIC_URL + "images/icon/save.svg",
          active: false,
          handler: this.saveHandle,
          tip: "保存视图",
          hidden: !this.reciveId,
        },
        {
          icon: PUBLIC_URL + "images/icon/layers.svg",
          active: this.showLayerPick,
          handler: () => {
            this.showLayerPick = !this.showLayerPick;
          },
          tip: "图层控制",
        },
        // {
        //     icon: "./images/icon/point.svg",
        //     active: false,
        //     handler: () => {
        //         this.showPointLayerPick = !this.showPointLayerPick;
        //     },
        //     tip: "监测点位",
        // },
        {
          icon: PUBLIC_URL + "images/icon/earth.svg",
          active: false,
          handler: () => {
            this.cesiumMap.viewer.wutu.openFlyAnimation(() => {});
          },
          tip: "飞至",
        },
        {
          icon: PUBLIC_URL + "images/icon/rotate.svg",
          active: this.rotate,
          handler: () => {
            this.rotate = !this.rotate;
          },
          tip: "旋转",
        },
      ].filter((item) => !item.hidden);
    },
  },
  watch: {
    showBase(val) {
      const { viewer } = this.cesiumMap;
      // viewer.baseLayerPicker.viewModel.selectedImagery = val
      //     ? viewer.baseLayerPicker.viewModel.imageryProviderViewModels[0]
      //     : null;
      viewer.imageryLayers.get(0).show = val;
    },
    showTerrain(val) {
      const { viewer } = this.cesiumMap;
      // viewer.baseLayerPicker.viewModel.selectedImagery = val
      //     ? viewer.baseLayerPicker.viewModel.imageryProviderViewModels[0]
      //     : null;
      let terrainProvider = null;
      if (val) {
        terrainProvider = new Cesium.CesiumTerrainProvider({
          url: AppGlobalConfig.CesiumTerrainProvider,
        });
      } else {
        terrainProvider = new Cesium.EllipsoidTerrainProvider({});
      }
      viewer.scene.terrainProvider = terrainProvider;
    },
    rotate(val) {
      wutu3d.point.windingPoint.stop();
      const viewer = this.cesiumMap.viewer;
      viewer.clock.shouldAnimate = false;
      if (val) {
        this.cesiumMap.viewer.clock.shouldAnimate = true;
        const point = wutu3d.point.getCenter(viewer);
        wutu3d.point.windingPoint.start(viewer, point);
      }
    },
  },
  methods: {
    maximumScreenSpaceErrorHandle(val) {
      this.maximumScreenSpaceError = val;
      const { viewer } = this.cesiumMap;
      let primitives = viewer.scene.primitives;
      for (let i = 0; i < primitives.length; i++) {
        const primitive = primitives.get(0);
        if (primitive instanceof Cesium.Cesium3DTileset) {
          primitive.maximumScreenSpaceError = val;
        }
      }
    },
    saveHandle() {
      if (!this.reciveId) return;

      UpdateTailingPond3DConfig({
        id: this.reciveId,
        config: {
          viewpoint: this.cesiumMap.viewer.wutu.getCameraView(),
          tileUrl: this.currentPond.tileUrl,
          mapUrl: this.currentPond.mapUrl,
        },
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.tool {
  position: absolute;
  right: 1.6rem;
  top: 0.5rem;
  z-index: 999;
  display: flex;
  justify-content: space-between;
  flex-direction: column;
  list-style: none;
  padding: 0;
  margin: 0;
  li {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 0.2rem;
    width: 0.2rem;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.5);
    background-color: rgba(255, 255, 255, 0.1);
    margin-top: 0.04rem;
    cursor: pointer;
    list-style: none;
    margin-right: 0.05rem;

    &:hover,
    &.active {
      border: 1px solid #00a3e9;
      background-color: rgba(255, 255, 255, 0.3);
    }

    img {
      max-width: 0.1rem;
      height: auto;
    }
  }
}
</style>
<style lang="scss">
.tool-tooltip {
  padding: 5px 8px;
  margin-left: 5px !important;
  .popper__arrow {
    display: none !important;
  }
}
</style>
